import React, { useState, useEffect } from 'react'
import styles from '../../styles/classroom/infoShow.scss'
import { withRouter } from 'next/router'
import { axiosConfig, backIP, IconFont, warning } from '../common/config';
import axios from 'axios'
import { getToken } from '../common/util';

const courseData = [
    {
        prefix: '第一二节课',
        key: 'first'
    },
    {
        prefix: '第三四节课',
        key: 'second'
    },
    {
        prefix: '第五六节课',
        key: 'third'
    },
    {
        prefix: '第七八节课',
        key: 'fourth'
    },
]

const info = [
    {
        prefix: '座位数：',
        key: 'seat_number'
    },
    {
        prefix: '所属教学楼：',
        key: 'house'
    },
    {
        prefix: '楼层：',
        key: 'floor'
    },
]

function InfoShow({ router, setCurrentMenuIndex, setCurrentCourse }) {
    const [classroomInfo, setClassrommInfo] = useState<any>()

    const getDetailInfo = async (classID: number) => {
        const token: string = getToken();
        const { data: res }: { data: axiosConfig } = await axios.get(`${backIP}/detailClass`, {
            params: {
                class_id: classID,
            },
            headers: {
                Authorization: token,
            }
        })
        if (res.code === 0) {
            setClassrommInfo(res.data)
        }
    }
    const handleBorrowClick = (item) => {
        if (item.result) {
            warning('该时段教室已被借用，请选择其他时段或其他教室')
            return
        }
        setCurrentMenuIndex('borrow')
        setCurrentCourse(item.course)
    }

    useEffect(() => {
        const classID: number = router.query.class;
        getDetailInfo(classID);
    }, [router.query.class]);
    return (
        <div className={styles.layout}>
            {
                classroomInfo ?
                    <div className={styles.main}>
                        <p className={styles.name}>{classroomInfo.name}</p>
                        <div className={styles.cardLayout}>
                            <div className={styles.card}>
                                <p className={styles.cardTitle}>教室信息展示</p>
                                <p className={styles.line}></p>
                                {
                                    info.map((item, index) => {
                                        return <p className={styles.content} key={index}>
                                            <span className={styles.prefix}>{item.prefix}</span>
                                            {classroomInfo[item.key]}
                                        </p>
                                    })
                                }
                            </div>
                            <div className={styles.card}>
                                <p className={styles.cardTitle}>课程表展示</p>
                                <p className={styles.line}></p>
                                {
                                    courseData.map((item, index) => {
                                        return <p key={index} className={styles.content}>
                                            <span className={styles.prefix}>{item.prefix}：</span>
                                            <span>
                                                {
                                                    (classroomInfo[item.key].result &&
                                                        '已借')
                                                    || '空闲'
                                                }
                                            </span>
                                            <IconFont
                                                type='iconjiekuanxinxi'
                                                className={styles.borrowIcon}
                                                onClick={() => { handleBorrowClick(classroomInfo[item.key]) }}
                                            />
                                        </p>
                                    })
                                }
                            </div>
                        </div>
                    </div> :
                    <div>没有信息</div>
            }
        </div>
    )
}

export default withRouter(InfoShow);